<template>
  <div>
    <el-button @click.native.prevent="addRow()" type="success" style="left: 50px">添加頂級信息</el-button>
    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border
              default-expand-all
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="id" label="编号" width="100"></el-table-column>
      <el-table-column prop="pid" label="父级权限id" width="180"></el-table-column>
      <el-table-column prop="value" label="权限值" width="180"></el-table-column>
      <el-table-column prop="uri" label="前端资源路径" width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable width="180"></el-table-column>
      <el-table-column prop="type" label="权限类型：0->目录；1->菜单" width="180"></el-table-column>
      <el-table-column prop="status" label="启用状态 0->禁用；1->启用" width="180"></el-table-column>

      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deletePermission(scope.$index, scope.row)" type="text" size="small">移除</el-button>
          <el-button @click.native.prevent="updatePermission(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click.native.prevent="addPermission(scope.row)" type="text" size="small">添加子级</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'permission',
    data () {
      return {
        tableData: [
          {
            id: 3,
            pid: 1,
            createTime: '2016-05-01',
            name: '王小虎',
            value: 'www:role:pp',
            uri: 'www/role/pp',
            status: 1,
            type: 0,
            children: [{
              id: 31,
              pid: 3,
              createTime: '2016-05-01',
              name: '王小虎',
              value: 'www:role:pp',
              uri: 'www/role/pp',
              status: 1,
              type: 1
            }, {
              id: 32,
              pid: 3,
              createTime: '2016-05-01',
              name: '王小虎',
              value: 'www:role:pp',
              uri: 'www/role/pp',
              status: 1,
              type: 1
            }]

          },

          {
            id: 66,
            pid: 1,
            createTime: '2016-05-01',
            name: '王小虎001',
            value: 'www:role:pp',
            uri: 'www/role/pp',
            status: 1,
            type: 0,
            children: [{
              id: 377,
              pid: 66,
              createTime: '2016-05-01',
              name: '王小虎002',
              value: 'www:role:pp',
              uri: 'www/role/pp',
              status: 1,
              type: 1,
              children: [{
                id: 388,
                pid: 377,
                createTime: '2016-05-01',
                name: '王小虎003',
                value: 'www:role:pp',
                uri: 'www/role/pp',
                status: 1,
                type: 1
              }, {
                id: 399,
                pid: 377,
                createTime: '2016-05-01',
                name: '王小虎004',
                value: 'www:role:pp',
                uri: 'www/role/pp',
                status: 1,
                type: 1
              }]
            }]

          }

        ]
      }
    },
    created () {
      this.query()
      // this.form = this.$route.query.form
    },
    methods: {
      //AddPermission
      addRow () {
        this.$router.push('/AddPermission')
      },
      //UpdatePermission
      updatePermission (row) {
        //对象传递过去，直接展示
        this.$router.push({path: '/UpdatePermission', query: {form: row}})
      },
      //添加子集
      addPermission(row){
        this.$router.push({path: '/AddPer', query: {form: row.id}})
      },
      //刪除
      deletePermission (index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //将真实的id传给后端
          var data = {id: row.id}
          this.$http.getRequest('user/role/permission/delete', data).then(res => {
            if (res.data.code == 200) {

              this.$message.success('恭喜！删除成功！')
            } else if (res.data.code == 403) {
              this.$message.info('没有相关权限！')
            } else {
              this.$message.info(res.data.message)
            }
          }).catch(err => {
            this.$message.info(err)
          })
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      },

      query () {
        this.$http.getRequest('user/role/permission/index', {}).then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data
          } else if (res.data.code == 403) {
            this.$message.info('没有相关权限！')
          } else {
            this.$message.info(res.data.message)
          }
        }).catch(err => {
          this.$message.info(err)
        })
      },

      load (tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ])
        }, 1000)
      }
    }
  }
</script>

<style scoped>

</style>
